<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZeusGIS - 专业的GIS工具合集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部标题栏 -->
        <header class="app-header">
            <div class="header-left">
                <button id="toggleSidebar" class="sidebar-toggle">☰</button>
                <h1>ZeusGIS</h1>
                <span class="subtitle">专业的GIS工具合集</span>
            </div>
            <div class="header-right">
                <span class="version">v2.0.0</span>
            </div>
        </header>

        <div class="app-body">
            <!-- 左侧导航区 -->
            <aside class="sidebar" id="sidebar">
                <nav class="nav-menu">
                    <div class="nav-section">
                        <h3>GIS工具</h3>
                        <ul class="nav-list">
                            <li class="nav-item active" data-tool="geocoding">
                                <i class="icon">🌍</i>
                                <span>地理编码转换</span>
                            </li>
                            <li class="nav-item" data-tool="dataconvert">
                                <i class="icon">🔄</i>
                                <span>数据转换</span>
                            </li>
                            <li class="nav-item" data-tool="helloworld">
                                <i class="icon">👋</i>
                                <span>示例工具</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="nav-section">
                        <h3>即将推出</h3>
                        <ul class="nav-list">
                            <li class="nav-item disabled">
                                <i class="icon">📊</i>
                                <span>数据浏览器</span>
                            </li>
                            <li class="nav-item disabled">
                                <i class="icon">🔄</i>
                                <span>坐标转换</span>
                            </li>
                            <li class="nav-item disabled">
                                <i class="icon">📐</i>
                                <span>空间分析</span>
                            </li>
                        </ul>
                    </div>
                </nav>
            </aside>

            <!-- 右侧功能区 -->
            <main class="main-content">
                <!-- 地理编码转换工具 -->
                <div class="tool-panel active" id="tool-geocoding">
                    <div class="tool-header">
                        <h2>地理编码转换工具</h2>
                        <p>支持Excel文件的地理编码批量转换</p>
                    </div>

                    <!-- 文件选择区域 -->
                    <section class="section">
                        <h3>文件设置</h3>
                        <div class="form-group">
                            <label>选择Excel文件:</label>
                            <div class="file-input-group">
                                <input type="text" id="inputFile" readonly placeholder="请选择Excel文件">
                                <button id="selectFileBtn">选择文件</button>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>保存路径:</label>
                            <div class="file-input-group">
                                <input type="text" id="outputFile" readonly placeholder="请选择保存路径">
                                <button id="selectSaveBtn">选择路径</button>
                            </div>
                        </div>
                    </section>

                    <!-- 工作表选择区域 -->
                    <section class="section" id="sheetSection" style="display: none;">
                        <h3>工作表选择</h3>
                        <div id="sheetList"></div>
                    </section>

                    <!-- 列选择区域 -->
                    <section class="section" id="columnSection" style="display: none;">
                        <h3>列设置</h3>
                        <div class="form-group">
                            <label>选择待处理的列:</label>
                            <select id="columnSelect">
                                <option value="">请选择列</option>
                            </select>
                        </div>
                    </section>

                    <!-- API设置区域 -->
                    <section class="section">
                        <h3>API设置</h3>
                        <div class="form-group">
                            <label>地图平台:</label>
                            <select id="platformSelect">
                                <option value="amap">高德地图</option>
                                <option value="tencent">腾讯位置服务</option>
                                <option value="tianditu">天地图</option>
                                <option value="baidu" disabled>百度地图 (预留)</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label>API Key:</label>
                            <input type="text" id="apiKey" value="62ce26652cf472468c38a10ff74d63c3" placeholder="请输入API Key">
                        </div>

                        <div class="form-group">
                            <label>请求间隔 (毫秒):</label>
                            <input type="number" id="requestDelay" value="100" min="50" max="2000" placeholder="请求间隔">
                            <small>建议100-500毫秒，避免被封禁</small>
                        </div>
                    </section>

                    <!-- 进度显示区域 -->
                    <section class="section" id="progressSection" style="display: none;">
                        <h3>处理进度</h3>
                        <div class="progress-bar">
                            <div class="progress-fill" id="progressFill"></div>
                        </div>
                        <div class="progress-info">
                            <span id="progressText">准备中...</span>
                            <span id="progressPercent">0%</span>
                        </div>
                        <div class="progress-details">
                            <div>成功: <span id="successCount">0</span></div>
                            <div>失败: <span id="failCount">0</span></div>
                            <div>总计: <span id="totalCount">0</span></div>
                        </div>
                    </section>

                    <!-- 控制按钮 -->
                    <section class="section">
                        <div class="button-group">
                            <button id="startBtn" class="btn btn-primary" disabled>开始转换</button>
                            <button id="pauseBtn" class="btn btn-warning" disabled>暂停</button>
                            <button id="resumeBtn" class="btn btn-info" disabled>继续</button>
                            <button id="stopBtn" class="btn btn-danger" disabled>停止</button>
                            <button id="clearCacheBtn" class="btn btn-secondary">清除缓存</button>
                        </div>
                    </section>

                    <!-- 日志区域 -->
                    <section class="section">
                        <h3>处理日志</h3>
                        <div class="log-container" id="logContainer">
                            <div class="log-item">欢迎使用ZeusGIS地理编码转换工具</div>
                        </div>
                    </section>
                </div>

                <!-- 数据转换工具 -->
                <div class="tool-panel" id="tool-dataconvert">
                    <div class="tool-header">
                        <h2>数据转换工具</h2>
                        <p>支持多种地理数据格式之间的转换</p>
                    </div>

                    <!-- 转换类型选择 -->
                    <section class="section">
                        <h3>转换设置</h3>
                        <div class="form-group">
                            <label>转换类型:</label>
                            <select id="convertType">
                                <option value="shp2geojson">SHP转GeoJSON</option>
                                <option value="geojson2shp">GeoJSON转SHP</option>
                                <option value="csv2geojson">CSV转GeoJSON</option>
                                <option value="kml2geojson" disabled>KML转GeoJSON (即将推出)</option>
                                <option value="gpx2geojson" disabled>GPX转GeoJSON (即将推出)</option>
                            </select>
                        </div>
                    </section>

                    <!-- 文件选择区域 -->
                    <section class="section">
                        <h3>文件设置</h3>
                        <div class="form-group">
                            <label>输入文件:</label>
                            <div class="file-input-group">
                                <input type="text" id="convertInputFile" readonly placeholder="请选择输入文件">
                                <button id="selectConvertInputBtn">选择文件</button>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>输出文件:</label>
                            <div class="file-input-group">
                                <input type="text" id="convertOutputFile" readonly placeholder="请选择输出路径">
                                <button id="selectConvertOutputBtn">选择路径</button>
                            </div>
                        </div>
                    </section>

                    <!-- 转换选项 -->
                    <section class="section" id="convertOptions">
                        <h3>转换选项</h3>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="preserveProperties" checked>
                                保留属性信息
                            </label>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="simplifyGeometry">
                                简化几何图形
                            </label>
                        </div>
                        <div class="form-group" id="encodingSection">
                            <label>编码格式:</label>
                            <select id="encodingSelect">
                                <option value="utf8">UTF-8</option>
                                <option value="gbk">GBK</option>
                                <option value="gb2312">GB2312</option>
                            </select>
                        </div>
                        
                        <!-- CSV坐标列选择 -->
                        <div class="form-group hidden" id="csvCoordinateSection">
                            <h4>坐标列设置</h4>
                            <div class="coordinate-selection">
                                <div class="form-group">
                                    <label>X坐标列 (经度):</label>
                                    <select id="csvXColumnSelect">
                                        <option value="">请先选择CSV文件</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Y坐标列 (纬度):</label>
                                    <select id="csvYColumnSelect">
                                        <option value="">请先选择CSV文件</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button type="button" id="previewCsvBtn" disabled>预览CSV数据</button>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 进度显示区域 -->
                    <section class="section" id="convertProgressSection" style="display: none;">
                        <h3>转换进度</h3>
                        <div class="progress-bar">
                            <div class="progress-fill" id="convertProgressFill"></div>
                        </div>
                        <div class="progress-info">
                            <span id="convertProgressText">准备中...</span>
                            <span id="convertProgressPercent">0%</span>
                        </div>
                    </section>

                    <!-- 控制按钮 -->
                    <section class="section">
                        <div class="button-group">
                            <button id="startConvertBtn" class="btn btn-primary" disabled>开始转换</button>
                            <button id="previewBtn" class="btn btn-info" disabled>预览数据</button>
                            <button id="clearConvertBtn" class="btn btn-secondary">清空设置</button>
                        </div>
                    </section>

                    <!-- 转换日志 -->
                    <section class="section">
                        <h3>转换日志</h3>
                        <div class="log-container" id="convertLogContainer">
                            <div class="log-item">欢迎使用数据转换工具</div>
                        </div>
                    </section>
                </div>

                <!-- Hello World 演示工具 -->
                <div class="tool-panel" id="tool-helloworld">
                    <div class="tool-header">
                        <h2>示例工具演示模块</h2>
                        <p>这是一个演示模块，展示如何添加新的工具功能</p>
                    </div>

                    <section class="section">
                        <h3>基础表单示例</h3>
                        
                        <div class="form-group">
                            <label>文本输入:</label>
                            <input type="text" id="demoText" placeholder="请输入文本">
                        </div>

                        <div class="form-group">
                            <label>数字输入:</label>
                            <input type="number" id="demoNumber" placeholder="请输入数字" min="0" max="100">
                        </div>

                        <div class="form-group">
                            <label>选择框:</label>
                            <select id="demoSelect">
                                <option value="">请选择选项</option>
                                <option value="option1">选项1</option>
                                <option value="option2">选项2</option>
                                <option value="option3">选项3</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>多行文本:</label>
                            <textarea id="demoTextarea" rows="4" placeholder="请输入多行文本"></textarea>
                        </div>

                        <div class="form-group">
                            <label>复选框:</label>
                            <div class="checkbox-group">
                                <label><input type="checkbox" id="demoCheck1"> 选项A</label>
                                <label><input type="checkbox" id="demoCheck2"> 选项B</label>
                                <label><input type="checkbox" id="demoCheck3"> 选项C</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>单选框:</label>
                            <div class="radio-group">
                                <label><input type="radio" name="demoRadio" value="radio1"> 单选A</label>
                                <label><input type="radio" name="demoRadio" value="radio2"> 单选B</label>
                                <label><input type="radio" name="demoRadio" value="radio3"> 单选C</label>
                            </div>
                        </div>

                        <div class="button-group">
                            <button id="demoSubmit" class="btn btn-primary">提交数据</button>
                            <button id="demoClear" class="btn btn-secondary">清空表单</button>
                            <button id="demoExport" class="btn btn-success">导出数据</button>
                        </div>
                    </section>

                    <section class="section">
                        <h3>操作结果</h3>
                        <div class="result-container" id="demoResult">
                            <p>点击上方按钮查看操作结果</p>
                        </div>
                    </section>

                    <section class="section">
                        <h3>开发说明</h3>
                        <div class="info-box">
                            <h4>如何添加新的工具模块：</h4>
                            <ol>
                                <li>在导航区添加新的菜单项（修改index.html）</li>
                                <li>创建对应的工具面板（添加tool-panel div）</li>
                                <li>在renderer.js中添加对应的事件处理逻辑</li>
                                <li>根据需要添加样式（修改styles.css）</li>
                            </ol>
                            <p><strong>提示：</strong>可以参考这个Hello World模块的结构来创建新的功能模块。</p>
                        </div>
                    </section>
                </div>
            </main>
        </div>
    </div>

    <script src="renderer.js"></script>
</body>
</html>